import React, { Component } from "react";
import {withRouter} from 'react-router-dom'
const abilityList = [
  {
    title: "人脸识别",
    desc:
      "人脸识别通过提取人脸的特征，计算不同人脸的相似度，并给出相似度评分。支持1:1、1:N、M:N的人...",
    imgUrl:
      "https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/abilityBanner/1.png",
    linkUrl: "/FaceRecognition"
  },
  {
    title: "人体识别",
    desc:
      "人体识别通过实时检测图像或视频流中的所有人体并为人体打框，支持常见监控摄像头或者安防场景下的视…",
    imgUrl:
      "https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/abilityBanner/2.png",
    linkUrl: "/HumanRecognitionTracking"
  },
  {
    title: "机动车识别",
    desc:
      "机动车识别通过实时检测图像或视频流中的所有机动车并为车辆打框，支持毫秒级检测高速行驶的多个目标…",
    imgUrl:
      "https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/abilityBanner/3.png",
    linkUrl: "/MotorVehicleRecognition"
  },
  {
    title: "机动车车牌识别",
    desc:
      "可识别 5 种不同颜色的车牌，4种双层车牌，9种单层车牌，以及故意遮挡的号牌。",
    imgUrl:
      "https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/abilityBanner/4.png",
    linkUrl: "/VehicleLicensePlateRecognition"
  },
  {
    title: "非机动车识别",
    desc:
      "非机动车识别通过实时检测图像或视频流中的所有非机动车并为其打框，支持识别图片或视频流中的二轮自…",
    imgUrl:
      "https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/abilityBanner/5.png",
    linkUrl: "/NonMotorVehicleRecognition"
  },
  {
    title: "人体追踪",
    desc:
      "人体追踪通过提取人体特征，实现在单个摄像头跨场景下行人的识别与检索。可以对无法获取清晰拍摄人脸...",
    imgUrl:
      "https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/abilityBanner/6.png",
    linkUrl: "/CrossBorderHeadTracking"
  }
  // {title:"行业OCR识别算法",desc:"能够通过简单设置即可识别日常票据材料，识别准确率99%以上，轻松应对偏转变形图像，可与自然语义分…",imgUrl:"https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/abilityBanner/7.png","linkUrl":"/IndustryOCRRecognitionAlgorithms"},
];

const nlpList = [
  {
    title: "地址抽取",
    desc: "能够从12345市民来电长文本中，抽取其中包含的详细地址信息。",
    imgUrl:
      "https://yl-gateway.oss-cn-beijing.aliyuncs.com/aiMarket/nlpBanner/1.png"
  }
];

// <div className="yl-ai-container-panel-title nlp-title">自然语言处理</div>
//                         <div className="yl-ai-nlp-list">
//                             {
//                                 nlpList.map((vl,key)=> {
//                                     return <div key={`nlp_${key}`} className="yl-ai-nlp-item">
//                                     <img className="yl-ai-nlp-item-banner " src={vl.imgUrl} title="" alt=""/>
//                                     <div className="yl-ai-nlp-item-panel">
//                                         <div className="yl-ai-nlp-item-title">{vl.title}</div>
//                                         <div className="yl-ai-nlp-item-desc">{vl.desc}</div>
//                                         <div className="yl-ai-nlp-item-link">
//                                             <a href="#/AddressExtraction">了解更多</a>
//                                         </div>
//                                     </div>
//                                 </div>
//                                 })
//                             }
//                         </div>
@withRouter
export default class Home extends Component {
  componentDidMount() {
    window.scrollTo(0, 0);
  }
  turnPage = url => {
    // window.location = url;
    this.props.history.push(url)
  };
  render() {
    return (
      <div>
        <div className="yl-ai-home-banner">
          <div className="yl-ai-home-banner-max-width">
            <div className="yl-ai-home-banner-txt">

              <div className="yl-ai-home-banner-title">云粒智慧AI应用集市</div>
              <div className="yl-ai-home-banner-desc">
                云粒智慧在人脸、人体、车辆、光字符识别和自然语言处理等领域具有自主算法研发能力和工程化能力，研发成果已被应用于市政、环保、安防、党建等信息化领域。
              </div>
              <div className="yl-ai-home-img"></div>
            </div>
          </div>
        </div>

        <div className="yl-ai-home-container">
          <div className="yl-ai-container-panel">
            <div className="yl-ai-container-panel-title">机器视觉</div>
            <div className="yl-ai-ability-list">
              {abilityList.map((vl, key) => {
                return (
                  <div
                    key={`ability_${key}`}
                    onClick={() => {
                      this.turnPage(vl.linkUrl);
                    }}
                    className="yl-ai-ability-item"
                  >
                    <img
                      className="yl-ai-ability-item-banner"
                      src={vl.imgUrl}
                      title=""
                      alt=""
                    />
                    <div className="yl-ai-ability-item-panel">
                      <div className="yl-ai-ability-item-title">{vl.title}</div>
                      <div className="yl-ai-ability-item-desc">{vl.desc}</div>
                      <div className="yl-ai-ability-item-link">
                        <a href="javascript:;;">了解更多</a>
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    );
  }
}
